<template>
  <div class="app-container">
    <div class="filter-container">

      <el-date-picker
        v-model="listQuery.startDay"
        value-format="yyyy-MM-dd HH:mm:ss"
        type="datetime"
        placeholder="选择开始日期时间"
        style="width: 200px;"
        class="filter-item"
        clearable
        @keyup.enter.native="handleFilter"
      />
      <el-date-picker
        v-model="listQuery.endDay"
        value-format="yyyy-MM-dd HH:mm:ss"
        type="datetime"
        placeholder="选择结束日期时间"
        style="width: 200px;"
        class="filter-item"
        clearable
        @keyup.enter.native="handleFilter"
      />
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >
        搜索
      </el-button>

    </div>

    <el-table
      :key="key"
      :data="tableData"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column
        label="序号"
        prop="id"
        align="center"
        width="50"
      >
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
        prop="driverName"
        label="名称"
        align="center"
        width=""
      />
      <el-table-column
        prop="vehicle"
        label="车牌"
        align="center"
        width="170"
      />
      <el-table-column
        label="油卡类型"
        width=""
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.typeId | typeFilter1 }}
        </template>
      </el-table-column>
      <el-table-column
        prop="created"
        label="申请时间"
        align="center"
        width="140"
      />
      <el-table-column
        prop="payMoney"
        label="开卡费用"
        align="center"
        width=""
      />
      <el-table-column
        label="领取方式"
        width=""
        align="center"
      >
        <template slot-scope="scope">
          <el-tag size="medium" class="master-card"
                  @click="receiveInfo(scope.row)">
            {{ scope.row.receiveType | typeFilter2 }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column
        prop="handleTime"
        label="处理时间"
        align="center"
        width="140"
      />

      <el-table-column
        prop="oilCardNum"
        label="绑定卡号"
        align="center"
        width=""
      />

    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
    <receive-info ref="receiveInfo"></receive-info>

  </div>
</template>
<script>
  import permission from "@/directive/permission/index.js"; // 权限判断指令
  import checkPermission from "@/utils/permission"; // 权限判断函数
  import receiveInfo from "@/components/receiveInfo";

  import {
    getOilSupplyList,
    createOilSupply,
    getallAgent,
    business,
    getPageCooVerify,
    cooperationAll,
    addCooVerify,
    walletTradeList,
    getAllBuyOilByPage
  } from "@/api/v1";
  import {supplyUnBind} from "@/api/user";
  import ReceiveInfo from "@/components/receiveInfo"; // Seco
  import waves from "@/directive/waves"; // Waves directive
  import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
  import {parseTime} from "@/utils";
  import addImgall from "@/components/img";
  import provinceData from "@/components/province";


  export default {
    name: "saleCard2",
    filters: {
      typeFilter1(role) {
        switch (role) {
          case 1:
            return "中石油";
          case 2:
            return "中石化";
        }
      },
      typeFilter2(role) {
        switch (role) {
          case 1:
            return "上门自取";
          case 2:
            return "快递";
        }
      }
    },
    directives: {waves, permission},
    components: {Pagination, addImgall, provinceData,ReceiveInfo},
    data() {
      return {
        editPhone: true,
        imageUrl: "",
        tableData: [],
        allAgent: [],
        tableKey: 0,
        list: null,
        total: 0,
        listLoading: true,
        cooperation: [],
        listQuery: {
          page: 1,
          limit: 20,
          sort: "+id",
          cooId: "",
          startDay: "",
          endDay: ""
        },
        key: 1, // table key
        dialogFormVisible: false,
        rules: {
          inputEndMoney: [
            {required: true, message: "请输入对账金额", trigger: "blur"}
          ],
          cooId: [{required: true, message: "请选择加油站", trigger: "change"}]
        },
        dialogStatus: "",
        textMap: {
          update: "编辑",
          create: "新增"
        },
        temp: {
          inputEndMoney: "",
          cooId: ""
        },
        isAdmin: true
      };
    },
    watch: {
      checkboxVal(valArr) {
        this.formThead = this.formTheadOptions.filter(
          i => valArr.indexOf(i) >= 0
        );
        this.key = this.key + 1; // 为了保证table 每次都会重渲 In order to ensure the table will be re-rendered each time
      }
    },

    created() {

      this.getList();
    },
    methods: {
      getCooperationAll() {
        cooperationAll().then(res => {
          this.cooperation = res.data;
        });
      },
      resetTemp() {
        this.temp.inputEndMoney = "";
        this.temp.cooId = "";
      },
      handleCreate(role) {
        this.resetTemp();
        console.log(this.temp);
        this.dialogStatus = "create";
        this.dialogFormVisible = true;
        this.editPhone = false;
        this.$nextTick(() => {
          this.$refs["temp"].clearValidate();
        });
      },
      createData() {
        this.$refs["temp"].validate(valid => {
          if (valid) {
            addCooVerify(this.temp).then(res => {
              // this.list.unshift(this.temp);
              this.dialogFormVisible = false;
              this.$notify({
                title: "成功",
                message: res.msg,
                type: "success",
                duration: 2000
              });
              this.getList();
            });
          }
        });
      },
      handleUpdate(row) {
        this.temp = Object.assign({}, row); // copy obj
        console.log(row);
        this.dialogStatus = "update";
        this.dialogFormVisible = true;
        this.$refs.provinceData.getCityData();
        this.editPhone = true;
        this.$nextTick(() => {
          this.$refs["temp"].clearValidate();
        });
      },
      getList() {
        this.listLoading = true;
        this.listQuery.state = 1;
        getAllBuyOilByPage(this.listQuery).then(res => {
          this.tableData = res.data.records;
          this.total = Number(res.data.total);

        });
      },

      handleFilter() {
        this.listQuery.page = 1;
        this.getList();
      },
      receiveInfo(row){
        this.$refs.receiveInfo.parentRefMethod(row);
      }
    }
  };
</script>
<style scoped>
  .master-card {
    cursor: pointer;
  }
</style>

